import React, {Component} from 'react';
import {Col, Row, Spin} from 'antd';
import '../css/register.css';
import {Back} from '../components/EditComponent';
import {Redirect} from 'react-router-dom';
import {config} from "../config";
import {order} from "../value";
import app from '../AppMethod';

//import map from '../image/map.png';

class DeliveryOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            redirect: false,
            loading: false
        }
    };

    render() {
        if (this.state.redirect) {
            return <Redirect push to="/deliveryOrderDetail"/>; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数
        }
        return (
            <div className="orderListContainer">
                <div style={{position:'fixed',width:'100%',height:'44px',top:0,left:0,zIndex:4}}>
                    <Back title="配送订单" back="true" click={() => this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    <div style={{marginTop:44,marginBottom:80}}>
                        {
                            this.state.data.length > 0 ?
                                this.state.data.map((item, index) => {
                                    return (
                                        <OrderItem data={item} key={index} click={(path) => this.handleOnClick(path)}/>
                                    )
                                }) : <div style={{textAlign: 'center', marginTop: '40px'}}>无订单数据</div>
                        }
                    </div>
                </Spin>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetOrderList();
    };

    /**
     * 根据负责人id和客户id查询订单列表
     * @returns {Promise.<void>}
     */
    async handleGetOrderList() {
        this.setState({loading: true});
        let employee_id = app.getData('employee_id');
        let customer_id = app.getData('customer_id');
        let result = await app.post(order.QUERY_OUTPUTBYCUSTOMER, {employee_id: employee_id, customer_id: customer_id});
        if (result.code === 1) {
            let data = result.data.dataSet;
            this.setState({data, loading: false});
        } else {
            this.setState({data: [], loading: false});
        }
    };

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };

    /**
     * 处理跳转到详情页
     * @param path
     */
    handleOnClick(path) {
        this.props.history.push(config.path + path);
    };
}

class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let {output_num, output_follow_name, output_follow_phone, output_money, output_real_money,
            output_logistics_type,output_stop_position,output_customer_car,logistics_name,logistics_phone,
            logistics_address} = this.props.data;
        let isPay = false;
        let payText = '';
        if (output_money == null || output_money == undefined) {
            output_money = 0;
        }
        if (output_real_money == null || output_real_money == undefined) {
            output_real_money = 0;
        }
        let money = Number(output_money) - Number(output_real_money);
        if (money === 0) {
            isPay = true;
            payText = "已付款";
        } else {
            isPay = false;
            payText = "需付款：￥" + money;
        }
        let type = output_logistics_type;
        return (
            <Row className="allDeliveryContainer">
                <Row className="orderItem">
                    <Row style={{height: '30px', lineHeight: '30px'}}>
                        <Col className="orderItemNumber" xs={16} md={8} lg={6}>订单号：{output_num}</Col>
                        {
                            type==0||type==1?<Col className={isPay ? "orderIsPay" : "orderNotPay"} xs={8} md={8} lg={6}>{payText}</Col>:''
                        }
                    </Row>
                    <Row style={{height: '30px', lineHeight: '30px'}}>
                        <Col className="orderPerson" xs={10} md={8} lg={6}>跟单人：{output_follow_name}</Col>
                        <Col className="orderPerson" xs={14} md={8} lg={6}>联系方式：{output_follow_phone}</Col>
                    </Row>
                    {
                        type==1?<Row style={{height: '30px', lineHeight: '30px'}}>
                            <Col className="orderPerson" xs={12} md={8} lg={6}>客户车牌号：{output_customer_car}</Col>
                            <Col className="orderPerson" xs={12} md={8} lg={6}>停靠位置：{output_stop_position}</Col>
                        </Row>:''
                    }
                    {
                        type==2?
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运公司：{logistics_name}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运电话：{logistics_phone}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>物流地址：{logistics_address}</Col>
                            </Row>:
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderNotPay" xs={12} md={8} lg={6}>待收款：{output_money}元</Col>
                                <Col className="orderIsPay" xs={12} md={8} lg={6}>预付款：{output_real_money}元</Col>
                            </Row>
                    }
                </Row>
                <Row style={{marginTop: '8px'}}>
                    <Col span={24} className="btnItem"
                         onClick={() => this.handleDrop(`/deliveryOrderDetail/${output_num}`)}>查看详情</Col>
                </Row>
            </Row>
        )
    };

    handleDrop(path) {
        this.props.click(path);
    }
}

export default DeliveryOrder;